import { useState, useEffect } from 'react'
import { Drawer, Button } from 'antd'
import { DownOutlined, CloseOutlined } from '@ant-design/icons'
import {useHistory} from 'react-router-dom'

import IndexBar from '../common/IndexBar'
import Area from './Area'

import store from "../../store"
import http from '../../request'
import { torem } from '../../assets/js/rem'

function Cinema() {
  const [open, setOpen] = useState(!1);
  const [area, setArea] = useState(!1)
  const [areaData, setAreaData] = useState({})
  const [areaList, setAreaList] = useState([])
  const history = useHistory()

  useEffect(() => {
    store.dispatch({type:'changeFooter', data:true})
    getArea()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  return (
    <div>
      <div className='u-flex u-row-around u-border-bottom' style={{ height: torem(40), backgroundColor: '#fafafa' }}>
        <Button type="text" ghost style={{ width: '50%' }} onClick={() => setOpen(!0)}>{store.getState().city}<DownOutlined /></Button>
        <Button className='u-border-left' type="text" onClick={() => setArea(!0)} ghost style={{ width: '50%' }}>选择区域<DownOutlined /></Button>
      </div>
      <div>
        {areaList.map(i => <div className='u-p-15 u-font-12' style={{ color: "#808080" }} onClick={() => toDetails(i)} key={i.id}><h2 className='u-h2' style={{ color: "#424242" }}>{i.cinemaName}</h2><div style={{ lineHeight: torem(30) }}>{i.address}</div><div><span className='u-float' style={{ color: '#00b8f0', border: '1px solid #00b8f0', width: torem(18), height: torem(18) }}>座</span><span className='u-m-l-5 u-m-r-5' style={{ backgroundColor: '#ff8625', color: '#fff', paddingLeft: 1, paddingRight: 1 }}>新人专享</span><span>¥18.8元起</span></div></div>)}
      </div>
      <Drawer extra={<CloseOutlined onClick={() => setOpen(!1)} />} title={<h2 style={{ fontSize: torem(20), fontWeight: 700, textAlign: 'center' }}>选择城市</h2>} placement="top" height='100%' closable={false} onClose={() => setOpen(!1)} open={open} bodyStyle={{ padding: 0 }}>
        <IndexBar open={setOpen} get={getArea}/>
      </Drawer>
      <Drawer extra={<CloseOutlined onClick={() => setArea(!1)} />} title={<h2 style={{ fontSize: torem(20), fontWeight: 700, textAlign: 'center' }}>选择区域</h2>} placement="top" height='75%' closable={false} onClose={() => setArea(!1)} open={area} bodyStyle={{ padding: 0 }}>
        <Area data={areaData} change={changeArea} />
      </Drawer>
    </div>
  )
  function getArea() {
    let str = ''
    switch (store.getState().city) {
      case '北京': str = 'bj'
        break;
      case '上海': str = 'sh'
        break;
      case '广州': str = 'gz'
        break;
      default: break;
    }
    http('/cinema/', 'get', { params: { city: str } }).then(res => {
      if (res.data.data.returnCode === '0') {
        const data = res.data.data.returnValue.regionCinemas
        setAreaData(data)
        let arr = []
        Object.keys(data).forEach(i => {
          arr = [...arr, ...data[i]]
        })
        setAreaList(arr)
      }
    }).catch(err => console.log(err))
  }
  function changeArea(area) {
    setArea(!1)
    if (area === 'qb') {
      let arr = []
      Object.keys(areaData).forEach(i => {
        arr = [...arr, ...areaData[i]]
      })
      setAreaList(arr)
      return
    }
    setAreaList(areaData[area])
  }
  function toDetails(data) {
    history.push('/cinema/details')
    store.dispatch({type:'changeCinema',data})
  }
}

export default Cinema